﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sample.aspx.cs" Inherits="WCFRestfulService.sample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.loadTemplate-1.4.4.js"></script>
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <link type="text/css" rel="stylesheet" href="Css/Main.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                Name:&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtName" runat="server" Text=""></asp:TextBox>
            </div>
            <div>
                Address:<asp:TextBox ID="txtAddress" runat="server" Text=""></asp:TextBox>
            </div>
            <div>
                <input type="button" id="btnSubmit" value="Submit" onclick="SubmitData()" />
                <input type="button" id="btnDelete" value="Delete" onclick="DeleteUser()" />
                <input type="hidden" id="hiddenId" value="" />
            </div>
        </div>
        <div id="dvShow">
        </div>
        <br />
        <hr style="filter: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="100%" color="#987cb9" size="1" />

        <!-- Table goes in the document BODY -->
        <table class="altrowstable" id="userList" style="width:65%">
        </table>

        <hr style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="100%" color=#987cb9 SIZE=1>
    </form>
    <script type="text/html" id="user-tmpl">
        <tr>
            <td data-toggle="update"><a data-content="Id" href="#"></a></td>
            <td data-content="Name"></td>
            <td data-content="Address"></td>
        </tr>
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            //load user data
            loadUserData();
            window.onload = function () {
                altRows('userList');
            }
            $("#btnDelete").hide();
        });

        //Javascript goes in the document HEAD
        function altRows(id) {
            if (document.getElementsByTagName) {

                var table = document.getElementById(id);
                var rows = table.getElementsByTagName("tr");

                for (i = 0; i < rows.length; i++) {
                    if (i % 2 == 0) {
                        rows[i].className = "evenrowcolor";
                    } else {
                        rows[i].className = "oddrowcolor";
                    }
                }
            }
        }

        //load user data when open the page
        var loadUserData = function () {
            var url = "Service.svc/GetAllUsers";
            $.get(url, null, function (result) {
                var userArray = result.data;
                $("#userList").loadTemplate($("#user-tmpl"), userArray, {
                    complete: function () {
                        //$("#userList").listview("refresh");
                        $("[data-toggle='update']").on("click", function () {
                            var id = $(this).text();
                            SelectUser(id);
                        });
                    }
                });
            });
        };

        //select User
        function SelectUser(id) {
            var url = "Service.svc/GetUser/"+id;
            $.get(url, null, function (result) {
                var user = result.data;
                $("#txtName").val(user.Name);
                $("#txtAddress").val(user.Address);
                $("#hiddenId").val(user.Id);
                $("#btnDelete").show();
            });
        }

        //click Submit button
        function SubmitData() {
            var id = $("#hiddenId").val();
            if (id==="") {
                Add();
            }
            else {
                UpdateUser();
            }
        }

        //send data with object 
        function Add() {
            var userName = $("#txtName").val();
            var address = $("#txtAddress").val();
            var url = "Service.svc/AddUser";
            var data = {
                "Name": userName,
                "Address": address
            };
            var json = JSON.stringify(data);
            $.ajax({
                type: "POST",
                url: url,
                data: json,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (result, status, jqXHR) {
                    $("#dvShow").html(result.message);
                    window.location.reload();
                },
                error: function (result) {
                    $("#dvShow").html(result.message);
                }
            });
        }

        //delete user
        function DeleteUser() {
            var id = $("#hiddenId").val();
            var url = "Service.svc/DeleteUser/" + id;
            $.ajax({
                type: "POST",
                url: url,
                data: null,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (result, status, jqXHR) {
                    $("#dvShow").html(result.message);
                    setTimeout(function () {
                        alert(result.message)
                        window.location.reload();
                    }, 1000);
                },
                error: function (result) {
                    $("#dvShow").html(result.message);
                }
            });
        }

        //update user
        function UpdateUser() {
            var id = $("#hiddenId").val();
            var url = "Service.svc/UpdateUser";
            var userName = $("#txtName").val();
            var address = $("#txtAddress").val();
            var url = "Service.svc/UpdateUser";
            var data = {
                "Id":id,
                "Name": userName,
                "Address": address
            };
            var json = JSON.stringify(data);
            $.ajax({
                type: "POST",
                url: url,
                data: json,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (result, status, jqXHR) {
                    $("#dvShow").html(result.message);
                    setTimeout(function () {
                        alert(result.message)
                        window.location.reload();
                    }, 1000);
                },
                error: function (result) {
                    $("#dvShow").html(result.message);
                }
            });
        }
    </script>
</body>
</html>
